body {position: relative; }
body {
		background-image: url('../img/tweed.png');
}
.wrapper { padding: 10px; }
section.content-section { 
	min-height: 100%; 
}
.wrapper.content { 
	text-align: justify; 
	background-image: url('../img/ricepaper.png');
	min-height: 100%;
	border-left: 2px solid #555;

	-webkit-box-shadow: 10px 0 6px -4px #333;
	   -moz-box-shadow: 10px 0 6px -4px #333;
	        box-shadow: 10px 0 6px -4px #333;

	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.wrapper.content p, .wrapper.content div { 
	text-indent: 10px; margin-bottom: 10px; 
	font-family: "Arial";
}
/*.wrapper.content * {  color: #4a4a4a }*/
img { max-width: 40%; display: block; margin: 0 auto; }

.wrapper.content .selected { background: #4183D7; color: #eee;}
.wrapper.content .selected .tag { background: #4183D7 }
.wrapper.content span.tag { 
	background: rgba(255, 255, 237, 0.4); 
	border-left: 1px solid #f00;
	display: block; padding-left: 2px;
}
.wrapper.content span.tag:hover{ background: rgba(255, 255, 237, 1); }
.wrapper.content span.echoTag{ 
	border: 1px solid blue; padding: 2px; cursor: pointer;
	position: relative; 
}
.wrapper.content span.echoTag:hover .content { display: block; }
.wrapper.content span.echoTag .content {
	position: absolute; display: none;
	height: 30px; top: -40px; left: 10px;
	background: #fff; padding: 0 10px;
	line-height: 30px;
	border: 1px solid #ccc;
}


/*-----------------------------------------------------------------*/
.control-panel {
	/*position: fixed; top: 50%;
	left: 0; height: 150px;
	padding: 20px;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;*/
}
.control-panel > a {
	position: absolute; color: #2ECC71;
	width: 50px; height: 50px;
	line-height: 50px; border-radius: 7px;
	font-size: 35pt; text-align: center; display: block;
	background: rgba(100, 100, 100, 0.3);
}
.control-panel > a:hover {
	color: #fff; background: rgba(100, 100, 100, 0.9);
}
.control-panel .info {
	top: 40%; left: 20px; font-size: 25pt; color: #E26A6A;
}
.control-panel .to-next { top: 50%; right: 40px; }
.control-panel .to-prev { top: 50%; left: 20px; }

/*-----------------------------------------------------------------*/
.popup-control {
	position: absolute;	display: none;
	width: 200px; background: #a4a4a4;
	border: 1px solid #4a4a4a; z-index: 100;
	border-radius: 5px;	
	margin-top: -10px;
	padding: 10px;
	transform: translate(10px, -100%);	
	-o-transform: translate(10px, -100%);	
	-moz-transform: translate(10px, -100%);
	-webkit-transform: translate(10px, -100%);
}
.popup-control * { color: #2b2b2b; }
.popup-control h2 { 
	text-align: center; font-size: 14pt; font-weight: 400;
	font-family: "Roboto Condensed";
}
.popup-control input[type="text"], .popup-control select {
	width: 100%; height: 20px;
	margin-bottom: 5px;
}
.popup-control input[type="submit"] {width: 70px; display: block; margin: 0 auto;}
.popup-control select { height: 30px;}
.popup-control .location { display: none; }

/*-----------------------------------------------------------------*/
@media (max-width: 1055px) {
	.control-panel { 
		position: fixed;
		top: 100%; left: 0; width: 100%; 
		margin-top: -40px; line-height: 40px;
		height: 150px; overflow: hidden; 
		padding: 0; background: #2b2b2b;
	}
	.control-panel a { background: #2b2b2b; }
	.control-panel .info, .control-panel .to-next, .control-panel .to-prev {
		display: block; width: 30%; font-size: 18pt;
		font-size: 15pt; float: left; position: static;
		text-align: center; color: #aaa; margin-top: -5px;
	}
	.control-panel > a:hover { background: none; color: #f3f6f8}
	/*.control-panel .info { color: #ff9900; }*/
	.control-panel > a:not(:last-child) { margin-right: 5% }
}

@media (max-width: 768px) {

	img { max-width: 100%;  }
}
